<template>
	<view>
		<view class="my-friend" v-if="isReady">我的好友</view>
		<block v-for="(item, index) in friendList" :key="index">
			<fun-friend-item :friend="item" 
			@clickRight="clickRight" 
			@clickLeft="clickLeft" 
			:searchValue="searchValue"
			:isSearch="true"></fun-friend-item>
		</block>
		<view class="hint-text" v-if="friendList.length == 0 && isReady">未找到相关好友！</view>
		<view class="toSearchAllUser" v-html="'网络查找'+keywords+'相关的人'" 
		@click="toSearFriend"
		v-if="isReady"></view>
	</view>
</template>

<script>
	import {Friend} from '@/model/friend.js';
	import funFriendItem from '@/components/funFriendItem/funFriendItem.vue';
	export default {
		data() {
			return {
				searchValue:'',
				friendList:[],
				isReady: false
			}
		},
		components:{
			funFriendItem
		},
		onNavigationBarButtonTap(e) {
			if(e.index == 0){
				// TODO 取消
			}
		},
		async onNavigationBarSearchInputConfirmed(e) {
			// TODO 点击搜索
			this.searchValue = e.text
			let res = await Friend.searchFriends({keyWord:this.searchValue,type:1})
			this.friendList = res.data
			this.isReady = true
		},
		computed:{
			keywords(){
				return `"<text class="keyword">${this.searchValue}</text>"`
			}
		},
		methods: {
			toSearFriend(){
				let searchValue = this.searchValue
				uni.navigateTo({
					url: "../searFriends/searFriends",
					success(res) {
						res.eventChannel.emit('acceptDataFromOpenerPage', {searchValue})
					}
				})
			},
			clickRight(uid){
				uni.navigateTo({
					url:"../chatRoom/chatRoom",
					success(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', { friendUid: uid, isSearch: true })
					}
				})
			},
			clickLeft(uid){
				uni.navigateTo({
					url:"../friendDetaile/friendDetaile"
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F2F2F2;
	}
	.keyword{
		color: #FFEB3B;
	}
</style>
<style lang="scss" scoped>
	.hint-text{
		text-align: center;
		color: #999;
		font-size: 26rpx;
		line-height: 100rpx;
		background-color: #FFFFFF;
	}
	.my-friend{
		background-color: #FFF;
		padding: 20rpx 20rpx;
		font-size: 26rpx;
		color: #999999;
	}
	.toSearchAllUser{
		background-color: #FFFFFF;
		line-height: 100rpx;
		font-size: 34rpx;
		color: #333333;
		padding: 0 20rpx;
		margin-top: 20rpx;
		overflow:hidden; //超出的文本隐藏
		text-overflow:ellipsis; //溢出用省略号显示
		white-space:nowrap; //溢出不换行
	}
	.keyword{
		color: $fun-link-text-color;
	}
</style>
